<template>
  <div class="index">
    <!--head-->
    <div class="role-head">
      <p class="role-head-title"><i class="icon iconfont icon-cloud-permissions"></i>权限管理<span class="addgrantMenu" v-if="permissionsAdd" @click="addMenu">增加权限菜单</span></p>
      <div class="role-head-operation">
        <span class="role-head-operation-items" v-if="permissionsRead" @click="selectShow"><i class="icon iconfont icon-chaxun"></i><span style="display:block;float:left">查询</span></span>
        <span class="role-head-operation-items"><a style="color:#fff;" href="javascript:history.go(-1)"><span style="display:block;float:left;font-size:16px;">返回</span><i class="icon iconfont icon-jinru"></i></a></span>
      </div>
    </div>
    <!--head end-->
    <!--select-->
    <div class="role-select on">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form label-position="left" label-width="80px" class="aaa">
            <el-form-item label="权限名称" class="rolelabel">
              <el-input ref="selectlist.purviewName" v-model="selectlist.purviewName" class="role-select-ipt"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form label-position="left" label-width="80px">
            <el-form-item label="操作参数" class="rolelabel">
              <el-input class="role-select-ipt"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form label-position="left" label-width="80px">
            <el-form-item label="登录名" class="rolelabel">
              <el-input class="role-select-ipt"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" :offset="16">
            <el-button @click="selectHide" class="colse">关    闭</el-button>
            <el-button class="select-submit" @click="getGrentList">查    询</el-button>
        </el-col>
      </el-row>      
    </div>
    <!--select end-->

    <!--left-->
    <div class="menus_area" id="menus_area">
      <dl v-for="item in leftGtantList" :key="item.purviewBh">
        <dt @click="changeNav(item.purviewBh)"><span>{{item.purviewName}}</span><i v-if="permissionsEdit" class="icon iconfont icon-bianji"></i><i class="icon iconfont icon-tianjia" v-if="permissionsAdd" @click="toAdd(item.purviewBh)"></i></dt>
        <dd :class="{on:item.purviewBh == checkedList}" v-for="(child, index) in item.child" :key="index" class="first_dd" @click="getGrentListClickchild(child.purviewBh)">
          <span class="nav-ipt">{{child.purviewName}}</span>
          <i class="icon iconfont icon-tianjia add" v-if="permissionsAdd" @click="toAdd(child.purviewBh)"></i>
        </dd>
      </dl>
    </div>
    <!--right-->
    <div class="right-table">
	  	<el-table
        :data="gtantList"
        style="width: 100%"
        :max-height="height">
        <el-table-column
          prop="purviewName"
          label="功能名称"
          width="100%">
        </el-table-column>
        <el-table-column
          prop="purviewVal"
          label="权限值"
          width="100%">
        </el-table-column>
        <el-table-column
          prop="isEnable"
          label="是否启用"
          width="100%">
        </el-table-column>
        <el-table-column
          label="操作"
          width="100%">
          <template slot-scope="scope">
            <el-button v-if="permissionsEdit" @click="toEdit(scope.row)" type="text" size="small"><i class="icon iconfont icon-bianji table-bianji"></i></el-button>
            <el-button v-if="permissionsDelete" @click.native.prevent="deleteRow(scope.row)" type="text" size="small"><i class="icon iconfont icon-shanchu"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
	  </div>

    <!--roleGrant-->
    <grantEdit ref="Edit" v-if="show" :personalGrantInfo="personalGrantInfo"></grantEdit>

    <!--grantAdd-->
    <grantAdd ref="Add" v-if="Addshow" :id="id"></grantAdd>
  </div>
</template>

<script>
import grantEdit from "./../components/grantEdit";
import grantAdd from "./../components/grantAdd";
import axios from "axios";
export default {
  name: "grant",
  components: {
    grantEdit,
    grantAdd
  },
  data() {
    return {
      show: false,
      Addshow: false,
      permissionsRead: "",
      permissionsEdit: "",
      permissionsDelete: "",
      permissionsAdd: "",
      id: {
        idParentBh: ""
      }, //父权限编号
      selectlist: {
        //查询条件
        purviewName: "", //权限名称
        purviewType: "", //权限类型
        purviewParentBh: "", //上级编号
        currentPage: "", //当前页,默认1
        pageSize: 10000, //每页行数,默认1
        sortby: "", //排序列,数据列的某一列
        order: "" //排序方式,正序：asc，倒序：desc
      },
      personalGrantInfo: {}, //存放单个权限信息
      gtantList: [], //权限列表
      leftGtantList: [], //权限列表
      checkedList: '', //选中节点
      height: "" //table高度
    };
  },
  mounted: function() {
    this.$nextTick(() => {
      //防止在登陆页没有登陆时候直接手动改变url访问
      this.initPage();
      //调用全局方法 设置index高度
      this.indexHeight();
      //
      this.getGrentList(); //所有权限
      this.getLeftGrent(); //左侧权限树
      //调用全局方法根据权限值显示对应信息
      this.grantType();
    });

    //table高度为左侧导航高度
    $("#menus_area").height($(window).height() - 270 + "px");
    this.height = $("#menus_area").height();
    $(".right-table").height(this.height);
  },
  methods: {
    //
    changeNav(purviewBh) {
      let _that = this;
      _that.checkedList = purviewBh;
      this.getLeftGrent2(purviewBh, (child)=>{
        _that.leftGtantList.forEach(e=>{
          if(e.purviewBh == purviewBh){
            _that.$set(e, 'child', child);
          }
        });
      });
    },
    //查条件hide
    selectShow() {
      $(".role-select").removeClass("on");
    },
    //查询条件hide
    selectHide() {
      $(".role-select").addClass("on");
      this.selectlist.purviewName = "";
      this.getGrentList();
    },
    //新增
    toAdd(n) {
      this.id.idParentBh = n;
      this.Addshow = true;
      this.$nextTick(() => {
        let that = this;
        layer.open({
          type: 1,
          shadeClose: true,
          title: "新增权限",
          skin: "layui-layer-rim", //加上边框
          area: ["600px", "500px"], //宽高
          content: $(this.$refs.Add.$el),
          end: function() {
            that.Addshow = false;
          }
        });
      });
    },
    //增加权限菜单
    addMenu() {
      this.id.idParentBh = 0;
      this.Addshow = true;
      this.$nextTick(() => {
        let that = this;
        layer.open({
          type: 1,
          shadeClose: true,
          title: "新增权限",
          skin: "layui-layer-rim", //加上边框
          area: ["600px", "500px"], //宽高
          content: $(this.$refs.Add.$el),
          end: function() {
            that.Addshow = false;
          }
        });
      });
    },
    //编辑
    toEdit(row) {
      this.personalInfo(row);
      this.show = true;
      this.$nextTick(() => {
        let that = this;
        layer.open({
          type: 1,
          shadeClose: true,
          title: "编辑权限",
          skin: "layui-layer-rim", //加上边框
          area: ["600px", "500px"], //宽高
          content: $(this.$refs.Edit.$el),
          end: function() {
            that.show = false;
          }
        });
      });
    },
    //删除
    deleteRow(row) {
      axios
        .delete(grantURL + "/" + row.purviewBh, {
          headers: { Authorization: appDB.get("userInfo").token }
        })
        .then(res => {
          let d = res.data;
          if (d.resultCode == 0) {
            this.getGrentList();
            this.getLeftGrent();
          } else {
            layer.msg(d.msg);
          }
        });
    },
    //获取权限列表
    getGrentList() {
      this.selectlist.purviewParentBh = "";
      axios
        .get(grantURL, {
          headers: { Authorization: appDB.get("userInfo").token },
          params: this.selectlist
        })
        .then(response => {
          let d = response.data;
          if (d.resultCode == 0) {
            this.gtantList = d.record.rows;
          } else {
            layer.msg(d.msg);
          }
        })
        .catch(error => {
          layer.msg("网络错误");
        });
    },
    //点击二级菜单获取权限列表
    getGrentListClickchild(n) {
      this.selectlist.purviewParentBh = n;
      axios
        .get(grantURL, {
          headers: { Authorization: appDB.get("userInfo").token },
          params: this.selectlist
        })
        .then(response => {
          let d = response.data;
          if (d.resultCode == 0) {
            this.gtantList = d.record.rows;
          } else {
            layer.msg(d.msg);
          }
        })
        .catch(error => {
          layer.msg("网络错误");
        });
    },
    //获取左侧权限树
    getLeftGrent() {
      axios
        .get(grantURL, {
          headers: { Authorization: appDB.get("userInfo").token },
          params: {
            purviewParentBh: "0",
            pageSize: 10000
          }
        })
        .then(response => {
          let d = response.data;
          if (d.resultCode == 0) {
            this.leftGtantList = d.record.rows;
          } else {
            layer.msg(d.msg);
          }
        })
        .catch(error => {
          layer.msg("网络错误");
        });
    },
    //获取权限树的二级目录
    getLeftGrent2(purviewBh, callback) {
      // console.info(purviewBh)
      axios
        .get(grantURL, {
          headers: { Authorization: appDB.get("userInfo").token },
          params: {
            purviewParentBh: purviewBh,
            pageSize: 10000
          }
        })
        .then(response => {
          let d = response.data;
          if (d.resultCode == 0) {
            if(callback instanceof Function){
              callback(d.record.rows);
            }
            // this.changeNav();
          } else {
            layer.msg(d.msg);
          }
        })
        .catch(error => {
          layer.msg("网络错误");
        });
    },
    //获取单个权限信息
    personalInfo(row) {
      axios
        .get(grantURL + "/" + row.purviewBh, {
          headers: { Authorization: appDB.get("userInfo").token }
        })
        .then(res => {
          let d = res.data;
          if (d.resultCode == 0) {
            this.personalGrantInfo = d.record;
            console.info(this.personalGrantInfo.purviewType);
          } else {
            layer.msg(d.msg);
          }
        })
        .catch(error => {
          layer.msg("网络错误");
        });
    }
  }
};
</script>

<style scoped>
@import "../assets/css/elementUI.css";
.first_dd {
  cursor: pointer;
}
.addgrantMenu {
  margin-left: 130px;
  cursor: pointer;
}
.ztree li {
  background: #fff;
}
.ztree li a {
  width: 100%;
}
.icon-tianjia {
  float: right;
  margin-right: 15px;
  position: relative;
  z-index: 99;
  font-size: 20px;
}
.icon-bianji {
  float: right;
  margin-right: 15px;
  position: relative;
  z-index: 99;
  font-size: 20px;
}
.add {
  color: #fff;
  font-size: 14px;
  margin-right: 18px;
  cursor: pointer;
}
.role-head {
  width: 100%;
  float: left;
  color: #fff;
  margin: 70px 0 20px 0;
}
.role-head-title {
  float: left;
  font-size: 16px;
  line-height: 24px;
}
.role-head-operation {
  /* width: 168px; */
  float: right;
}
.role-head-operation-items {
  height: 18px;
  line-height: 18px;
  padding: 0 20px;
  display: inline-block;
  cursor: pointer;
  border-right: 1px solid #fff;
  float: left;
}
.role-head-operation-items:last-child {
  float: left;
  border-right: 0;
  font-size: 16px;
  padding-right: 0;
}
.icon-chaxun {
  display: inline-block;
  margin-right: 4px;
  float: left;
}
.icon-jinru {
  color: #35c126;
  font-size: 26px;
  display: inline-block;
}
.role-select {
  width: 100%;
  height: 206px;
  padding: 20px 4%;
  overflow: hidden;
  float: left;
  background: #14466a;
  margin-bottom: 20px;
  transition: all ease-in-out 0.5s;
}
.role-select.on {
  width: 100%;
  height: 0;
  padding: 0 4%;
  background: #14466a;
  margin-bottom: 0;
}
.colse {
  border-radius: 30px;
  padding: 8px 40px;
  background: none;
  border: 1px solid #367fb6;
  color: #fff;
}
.select-submit {
  border-radius: 30px;
  padding: 8px 40px;
  background: #39b423;
  border: 1px solid #39b423;
  color: #fff;
}
.icon-cloud-permissions {
  font-size: 24px;
  margin-right: 4px;
  float: left;
}
/*left*/

.menus_area {
  width: 26%;
  overflow-y: auto;
  background-color: #093555 !important;
  float: left;
}

.menus_area dt {
  padding-left: 20px;
  padding-right: 10px;
  background-repeat: no-repeat;
  background-position: 10px center;
  background-color: #206da9;
  color: #f5f5f5;
  font-size: 14px;
  position: relative;
  line-height: 48px;
  cursor: pointer;
}

.menus_area dd {
  background-color: #093555;
  padding: 10px 10px 10px 20px;
  display: none;
}

.menus_area dd.on {
  display:block;
}

.menus_area dd:hover {
  background: #01213a;
}

.menus_area dd a {
  color: #f5f5f5;
  line-height: 20px;
}

.menus_area dt img {
  position: absolute;
  right: 10px;
  top: 20px;
}

.menus_area dl dd:last-child {
  padding-bottom: 10px;
}
.right-table {
  width: 74%;
  float: left;
  background: #fff;
}
.nav-ipt {
  background: none;
  color: #fff;
}

.role-table {
  width: 100%;
  float: left;
}
#role-table {
  width: 100%;
  border: 0;
  background: #fff;
  float: left;
}
#role-table tr td {
  padding: 12px 15px;
  border: 1px solid #cbcbcb;
  background: #fff;
}
#role-table tr:hover {
  background: #f0f0f0;
}
.role-table-title {
  width: 100%;
  background: #eeeeee;
}
.role-table-title td {
  padding: 12px 15px;
  border-right: 1px solid #cbcbcb;
  border-bottom: 1px solid #cbcbcb;
}
.role-table-operation {
  display: flex;
  justify-content: space-around;
}
.role-table-operation i {
  color: #5594d1;
  font-size: 18px;
  cursor: pointer;
}
.table-bianji {
  float: inherit;
  font-size: 16px;
}
</style>
